<template>
<div class="page-container">
    <div class="common-content">
        <!-- 列表搜索条件部分 label宽度要固定,优先展示输入框和下拉框 ;时间选择和地区选择放置在最后,因为后两个的尺寸表较大,换行后会导致整体对不齐 -->
        <div class="search-wrap">
            <el-form :inline="true" :model="searchFilters" :size="searchSize" ref="searchFilters" label-position="right" label-width="100px">
                <el-row class="search-input">
                    <el-form-item label="仓库名称：">
                        <el-input v-model="searchFilters.name" placeholder="请输入仓库名称"></el-input>
                    </el-form-item>
                    <el-form-item label="仓库编码:">
                        <el-select v-model="searchFilters.code" placeholder="请选择仓库编码">
                            <el-option v-for="item in selectedOptionsData1" :key="item.id" :label="item.code" :value="item.code"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="类型：">
                        <el-select v-model="searchFilters.type">
                            <el-option label="实体仓" value="1"></el-option>
                            <el-option label="店铺仓" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                </el-row>
                <!-- 搜索区域按钮-查询,重置 -->
                <el-row class="search-button">
                    <el-form-item>
                        <!--查询:蓝色图标-->
                        <el-button type="primary" size="small" @click="findPage()">查询</el-button>
                        <!--重置:白色图标-->
                        <el-button type="primary" size="small" @click="resetForm()">重置</el-button>
                    </el-form-item>
                </el-row>
                <el-row class="t_r">
                    <el-button-group>
                        <el-button type="primary" size="small" @click="downloadExcel()">导出</el-button>
                    </el-button-group>
                </el-row>
                <!-- 表格数据部分 -->
                <div class="table-wrap">
                    <jic-table :height="300" :tableList="tableList" :showDeleteOperation="false" :tableHeaderList="tableHeaderList" :totalSize="totalSize" :showDetailOperation="false" :showEditOperation="false" :showBatchDelete="false" :showSelection="true" :showOperation="false" :showIndex="false" @findPage="findPage" @handleSizeChange="handleSizeChange" @handlePageChange="handlePageChange" @selectionChange="selectionChange" ref="jicTable"></jic-table>
                </div>
            </el-form>
        </div>
    </div>
</div>
</template>

<script>
//一.导包区
import jicTable from "@/components/baseTable";
import {
    exportExcel
} from "@/utils/excel";
//二.数据输出区
export default {
    //2.1 注册组件
    components: {
        jicTable
    },

    //2.2 数据初始化区
    data() {
        return {
            selections: [], //多选框选中项
            selectedOptionsData1: [], //商家列表数据
            size: "small",
            dataForm: {
                code: null,
                name: null,
                ownerShip: null,
                status: null,
                merchantId: null,
                addressDetail: null,
                ownerName: null,
                ownerMobile: null,
                deleteFlag: 0
            },
            //2.2.1 公共数据初始化
            pageSize: 10,
            totalSize: 0, //// 返回数据总条数
            pageRequest: {
                pageNum: 1,
                pageSize: 10
            }, // 请求数据的参数
            tableList: [{}],
            excelList: [], // 表格列表数据
            searchSize: "mini",

            // 2.2.2 表格表头数据
            tableHeaderList: [{
                    prop: "code",
                    label: "仓库编码",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "name",
                    label: "仓库名称",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "type",
                    label: "仓库类型",
                    minWidth: 200,
                    formatter: this.formatterType
                },
                {
                    prop: "productCode",
                    label: "产品编号",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "warnValue",
                    label: "预警值",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "ownerShip",
                    label: "仓库归属",
                    minWidth: 100,
                    formatter: this.formatterOwnerShip
                },
                {
                    prop: "status",
                    label: "仓库状态",
                    minWidth: 100,
                    formatter: this.formatterStatus
                },
                {
                    prop: "ownerName",
                    label: "仓库负责人姓名",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "deptName",
                    label: "商家名称",
                    minWidth: 100,
                    formatter: null
                }
            ], // 2.2.3 搜索表单对应的数据对象初始化
            searchFilters: {
                name: null,
                code: null,
                type: null,
                ownerShip: null,
                status: null,
                merchantId: null,
                delete_flag: "0"
            },
            operation: false, // true:新增, false:编辑
            dialogVisible: false //// 是否显示弹窗内容;
        };
    },

    //1.初始化页面调用方法(dom元素绑定后再执行初始化数据操作)
    mounted() {
        this.findPage();
        this.listMerchant();
    },
    //2.3 JavaScript 方法区
    methods: {
        //2.3.1 JavaScript 公共方法区

        listMerchant() {
            let this_ = this;
            this.utils.request.getMStoreList({}, function (res) {
                if (res.code === "0000") {
                    this_.selectedOptionsData1 = res.data;
                }
            });
        },
        //2.请求列表数据
        findPage(pageNum) {
            // 传过滤器的参数
            let this_ = this;
            if (this_.searchFilters === undefined || this_.searchFilters === null) {
                this_.searchFilters = {
                    delete_flag: "0"
                };
            }
            this_.searchFilters.pageNum =
                pageNum === null || pageNum === undefined ?
                this.pageRequest.pageNum :
                pageNum;
            this_.searchFilters.pageSize = this.pageRequest.pageSize;
            this.utils.request.findMStoreWarningPage(this_.searchFilters, function (
                res
            ) {
                if (res.code === "0000") {
                    this_.tableList = res.data.rows;
                    this_.totalSize = Number(res.data.total);
                } else {
                    this_.tableList = [];
                    this_.totalSize = 0;
                }
            });
        },

        // 3.重置搜索框条件
        resetForm(formName) {
            this.searchFilters = {};
            this.findPage(null);
        },

        // 5.请求条数发生变化
        handleSizeChange(params) {
            this.pageRequest.pageSize = params.size;
            this.findPage();
        },

        // 6.请求页数发生变化
        handlePageChange(params) {
            this.pageRequest.pageNum = params.number;
            this.findPage();
        },
        // 7.页面弹窗处理方法
        add() {
            this.dialogVisible = true;
        },

        // 8.关闭弹窗
        handleClose() {
            this.dialogVisible = false;
        },
        //列表下载
        downloadExcel() {
            let this_ = this;
            if (this_.selections.length > 0) {
                this.$confirm("确定下载所选数据列表?", "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning"
                    })
                    .then(() => {
                        let fileName = "库存预警查询查询Excel";
                        if (this_.filters === undefined || this_.filters === null) {
                            this_.filters = {};
                        }
                        this_.filters.pageNum = this.pageRequest.pageNum;
                        this_.filters.pageSize = Number.MAX_SAFE_INTEGER;
                        this_.excelList = this_.selections;
                        this_.totalSize = Number(this_.selections.length);
                        exportExcel(this_.excelList, this.tableHeaderList, fileName);
                        this_.findPage(null);
                    })
                    .catch(() => {});
            } else {
                this.$confirm("确定下载列表文件?", "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning"
                    })
                    .then(() => {
                        let fileName = "库存预警查询查询Excel";
                        if (this_.filters === undefined || this_.filters === null) {
                            this_.filters = {};
                        }
                        this_.filters.pageNum = this.pageRequest.pageNum;
                        this_.filters.pageSize = Number.MAX_SAFE_INTEGER;
                        this_.utils.request.findMStoreWarningAll(
                            this_.searchFilters,
                            function (res) {
                                if (res.code === "0000" && res.data.length < 10000) {
                                    this_.excelList = res.data;
                                    this_.totalSize = Number(res.data.length);
                                } else {
                                    this_.$message({
                                        message: "没有数据或者数据量超过1万笔,请添加筛选条件后重试",
                                        type: "error"
                                    });
                                }
                            }
                        );
                        exportExcel(this_.excelList, this.tableHeaderList, fileName);
                        this_.findPage(null);
                    })
                    .catch(() => {});
            }
        },
        // 选中列表中的选项触发
        selectionChange(selections) {
            this.selections = selections.selections;
        },
        formatterStatus(row) {
            if (row.status === 0) {
                return "停用";
            } else if (row.status === 1) {
                return "启用";
            }
        },
        formatterType(row) {
            if (row.type === 1) {
                return "实体仓";
            } else if (row.type === 2) {
                return "店铺仓";
            }
        },
        formatterOwnerShip(row) {
            if (row.ownerShip === 1) {
                return "自有";
            } else if (row.ownerShip === 2) {
                return "三方";
            } else {
                return "无";
            }
        }
    }
};
</script>

<style lang="scss" scoped>
/* ele组件样式重置 */
.common-content {
    padding: 10px;
    box-sizing: border-box;

    .search-wrap /deep/ {
        .el-form-item__label {
            height: 32px;
            line-height: 32px;
        }

        .el-input--mini .el-input__inner {
            height: 32px;
            line-height: 32px;
        }

    }

    /* 通用工具部分样式 */
    .tool-wrap {
        width: 100%;
        height: auto;
        position: relative;
        overflow: hidden;

        .left-area {
            float: left;
            width: 50%;
            text-align: left;

            button {
                margin-right: 15px;
                border-radius: 5px;
            }
        }

        .right-area {
            float: right;
            width: 50%;
            text-align: right;
        }
    }

    /* 表格部分样式 */
    .table-wrap {
        width: 100%;
        max-height: 600px;
        margin-top: 20px;
    }

    /* 弹窗样式 */
    .dialog-wrap /deep/ .el-dialog__footer {
        text-align: center !important;
    }
}

.search-button {
    .el-form-item {
        margin-bottom: 20px !important;
    }
}

.t_r {
    .el-form-item {
        margin-bottom: 0px;
    }
}
</style>
